<style lang="stylus" rel="stylesheet/stylus" src="./playBackflow.styl"></style>
<template>
    <div class="playonline realTimeDataClass accQuery playBackflow" :style="{width:pageWidth}">
        <div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
            <div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
                <i class="icon iconfont">&#xe7d8;</i>
                <span class="title1">当前位置/游戏分析/玩家分析/</span>
                <span>{{title}}</span>
            </div>
            <div class="right_header_time">
                <div class="block">
                    <span>选择日期范围：</span>
                    <el-date-picker size='small' v-model="date" type="daterange" align="left" placeholder="选择日期范围" @change='dateChange' :picker-options="pickerOptions"></el-date-picker>
                </div>
            </div>
            <div class="choose_plat">
                <el-menu :theme="this.$store.getters.theme[4]" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="0" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>全平台</el-menu-item>
                    <el-menu-item index="3" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>安卓</el-menu-item>
                    <el-menu-item index="2" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>iOS</el-menu-item>
                    <el-menu-item index="9" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>通用</el-menu-item>
                    <el-menu-item index="4" :style='{"border":"1px solid"+this.$store.getters.theme[0]}'>高级筛选</el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="right_content">
            <div class="listChart2">
                <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
                    <p class='zoomIn animated'>回流用户</p>
                    <div class="chart1-introduce">
                        <el-popover ref="listChart1_popo" placement="top-start" title="回流分析-数据指标说明：" width="200" trigger="hover">
                            <p style="border-top:1px solid #cccccc;" v-for = "(value,key) in introduce1" :key="key">
                                    <span style="font-weight:bloder; font-size:13px;display:block;line-height:18px;font-weight:bolder;margin:5px 0;">{{value.title}}</span>
                                    <span style="display:block;line-height:14px;text-indent: 2em;margin:5px 0;">{{value.message}}</span>
                            </p>
                        </el-popover>
                        <i class="el-icon-information" v-popover:listChart1_popo></i>
                    </div>
                </div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handle">
                    <el-menu-item index="1">
                        <i class="iconfont">&#xe7dd;</i>7日回流
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="iconfont">&#xe7de;</i>14日回流
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="iconfont">&#xe7ef;</i>30日回流
                    </el-menu-item>
                </el-menu>
                <div class="realTimeData" id='realTimeData'></div>
            </div>
            <div class="listChart1">
                <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
                    <p class='zoomIn animated'>详细数据</p>
                    <div class="chart1-introduce">
                        <el-popover ref="listChart1_popo" placement="top-start" title="详细数据" width="200" trigger="hover" content="7日、14日、30日回流用户详细数据"></el-popover>
                        <i class="el-icon-information" v-popover:listChart1_popo></i>
                    </div>
                    <el-button type="primary" size="mini" class="excel" @click="excel('','玩家分析-回流用户分析')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
                        <i class="icon iconfont">&#xe7f0;</i>
                        导出excel
                    </el-button>
                </div>
                <div class="realTimeServiceTableBody">
                    <template>
                        <el-table :data="tableData" border :default-sort="{prop: 'time', order: 'descending'}" @sort-change="sortChange">
                            <el-table-column sortable align="center" v-for="col in tableHeader" :key="col.prop" :prop="col.prop" :label="col.label" :width='col.width' :fixed="col.fixed"></el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="block realTimeServicePage">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="dataTotal"></el-pagination>
                </div>
            </div>
            <div class="listChart2">
                <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
                    <p class='zoomIn animated'>回流设备</p>
                    <div class="chart1-introduce">
                        <el-popover ref="listChart1_popo" placement="top-start" title="回流分析-数据指标说明：" width="200" trigger="hover">
                            <p style="border-top:1px solid #cccccc;" v-for = "(value,key) in introduce2" :key="key">
                                    <span style="font-weight:bloder; font-size:13px;display:block;line-height:18px;font-weight:bolder;margin:5px 0;">{{value.title}}</span>
                                    <span style="display:block;line-height:14px;text-indent: 2em;margin:5px 0;">{{value.message}}</span>
                            </p>
                        </el-popover>
                        <i class="el-icon-information" v-popover:listChart1_popo></i>
                    </div>
                </div>
                <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" @select="handle1">
                    <el-menu-item index="1">
                        <i class="iconfont">&#xe7dd;</i>7日回流
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="iconfont">&#xe7de;</i>14日回流
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="iconfont">&#xe7ef;</i>30日回流
                    </el-menu-item>
                </el-menu>
                <div class="realTimeData" id='realTimeData2'></div>
            </div>
            <div class="listChart1">
                <div class="listChart1_title" :style='{"background":this.$store.getters.theme[5],"color":this.$store.getters.theme[6]}'>
                    <p class='zoomIn animated'>详细数据</p>
                    <div class="chart1-introduce">
                        <el-popover ref="listChart1_popo" placement="top-start" title="详细数据" width="200" trigger="hover" content="7日、14日、30日回流设备详细数据"></el-popover>
                        <i class="el-icon-information" v-popover:listChart1_popo></i>
                    </div>
                    <el-button type="primary" size="mini" class="excel" @click="excel('1','玩家分析-回流设备分析')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
                        <i class="icon iconfont">&#xe7f0;</i>
                        导出excel
                    </el-button>
                </div>
                <div class="realTimeServiceTableBody">
                    <template>
                        <el-table :data="tableData1" border :default-sort="{prop: 'time', order: 'descending'}" @sort-change="sortChange1">
                            <el-table-column sortable align="center" v-for="col in tableHeader1" :key="col.prop" :prop="col.prop" :label="col.label" :width='col.width' :fixed='col.fixed'></el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="block realTimeServicePage">
                    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="pageSizes1" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="dataTotal1"></el-pagination>
                </div>
            </div>
        </div>
        <v-advance ref="advance" :channels='channels' :servers="servers" @get="getData" :post-obj='postObj' @getlist="getList"></v-advance>
        <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
    </div>
</template>
<script src="./playBackflow.js"></script>